<template>
  <div>
    <h1 :class="{ active: isActive }">Dynamic Class</h1>
    <button @click="isActive = !isActive">切换</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isActive = ref(false);
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
</style>

<!-- <template>
  <div :class="[isActive && 'active', isHighlighted && 'highlighted']">
    <h1>Dynamic Class</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isActive = ref(true);
const isHighlighted = ref(false);
</script> -->
